﻿<%@ Page Title="" Language="C#" MasterPageFile="~/PIMMobile.master" AutoEventWireup="true" CodeFile="MealPlan.aspx.cs" Inherits="MealPlan" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script src="Scripts/jquery.min.js" type="text/javascript" > </script>
    <link href="Styles/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.validationEngine.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validationEngine-en.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.theme.css" />
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/demos/demos.css" />
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.all.css" />
    <link rel="stylesheet" href="jquery/jRating.jquery.css" type="text/css" />
    <script type="text/javascript" src="jquery/jRating.jquery.js"></script>
    <%--    <script src="Scripts/vpb_script.js" language="javascript" type="text/javascript" > </script>--%>
    <script src="Scripts/jquery.slimscroll.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        jQuery(".form").validationEngine({ scroll: false, focusFirstField: false });
        $('#primary-main').slimscroll({
            size: '15px',
            height : '150px'
        });
        loadRecipes();
    });
    function loadRecipes() {
        var MealPlanId = getUrlVars()["MealPlanId"];
        //alert(MealPlanId);
        $.ajax({
            type: "POST",
            url: "PIMServices.asmx/GetRecipeUserByMealPlan",
            data: "{'MealPlanId':'" + MealPlanId + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                //alert(response.d);
                BindRecipe(response);
            },
            error: function (msg) { alert(msg.constructor) }
        });

    }

    function RemoveIngredient(recipeId) {
        if (confirm('Do you want to remove this Recipe?')) {
            $("#li_" + recipeId + "").remove();
            //alert(document.getElementById("<% =hdRecipeId.ClientID %>").value);
            document.getElementById("<% =hdRecipeId.ClientID %>").value = document.getElementById("<% =hdRecipeId.ClientID %>").value.replace(recipeId + ',', '');
            //alert(document.getElementById("<% =hdRecipeId.ClientID %>").value);
        }
    }

    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }

    function BindRecipe(response) {
        var recipe = response.d;
        var html = "";
        var userid = '<%=Session["Userid"]%>';
        for (var i = 0; i < recipe.length; i++) {
            var varObjectID = recipe[i].RecipeID;
            var varObjectName;
            var varObjectNameFull;
            if (recipe[i].RecipeName != null) {

                varObjectName = recipe[i].RecipeName.substring(0, 10);
                if (varObjectName.length > 10) varObjectName = varObjectName + ' ..';
                varObjectNameFull = recipe[i].RecipeName;
            }
            else {
                varObjectName = 'No Name..';
                varObjectNameFull = 'No Name';
            }
            var varObjectImage = recipe[i].RecipeImage;
            if (varObjectImage != null) {
                var recipeID = varObjectID + ',';
                document.getElementById("<% =hdRecipeId.ClientID %>").value = document.getElementById("<% =hdRecipeId.ClientID %>").value + recipeID + ',';
                html += '<li id="li_' + varObjectID + '" class="ui-widget-content ui-corner-tr form-row-image" >'
                html += '<a id="' + varObjectID + '" class="none-decoration"' + varObjectID + '">' + varObjectName + '</a>';
                html += '<img class="tooltip"  id="' + varObjectID + '" height="72" width="88" alt="' + varObjectNameFull + '" serving="' + 1000 + '" src="data:image/jpeg;charset=utf-8;base64,' + varObjectImage + '" style="display: inline-block; height: 72px;" title="<b>Description: </b>' + varObjectNameFull + '</br><b>Author: </b>">';
                html += '<p>';
                if (userid != '') {
                    html += '<div><img src="images/img05.jpg" alt="" style="float:right; width="20" height="3" onclick="javascript:RemoveIngredient(' + varObjectID + ');">';
                    html += '</img></div>';
                }
                html += '</p>';
                html += '</li>'
            }
        }
        $('#gallery').html(html);
    }
    </script>
<script type="text/javascript">

    function getFile() {
        document.getElementById("fImageUpload").click();
        return false;
    }
    function readURL(input) {
        //alert(input);
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {

                document.getElementById("<%=Image2.ClientID%>").src = e.target.result;
                var object = e.target.result;
                object = object.replace('data:image/png;base64,', '');
                object = object.replace('data:image/png;base64,', '');
                object = object.replace('data:image/jpg;base64,', '');
                object = object.replace('data:image/gif;base64,', '');
                object = object.replace('data:image/jpeg;base64,', '');
                object = object.replace('data:image/bmp;base64,', '');
                object = object.replace('data:image/Icon;base64,', '');
                document.getElementById("<%=hdImage.ClientID%>").value = object;
                //alert(object);
            };
            reader.readAsDataURL(input.files[0]);
            return false;
        }
    }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div style="width:30%;height:130px; float:left; margin:5px;">
    <div style="float:left; width:30%;">
        <div class="form-image" >
            <img runat="server" id="Image2" class="img_border"/>
        </div>
        <div class="basic" style="margin:0 auto;" data-average="0" data-id="1"></div>
        <div style="text-align:center; " >
            <asp:Button ID="btnUpload" Width="90" CssClass="submit" runat="server" Text="Upload"  OnClientClick="return getFile()" />
        </div>
    </div>
    
    <div style="overflow: hidden; height: 0px; width: 0px;">
         <input type="file"   id="fImageUpload" onchange="readURL(this);"/>
    </div> 
</div>
<asp:Panel ID="panel1" Visible="false" runat="server">
 <div style="width: 60%; float: left; margin: 10px auto;">
        <div style="text-align: center; font-size: 12pt; font-weight: bold;">
            <asp:TextBox runat="server" ID="txtMealPlanName" placeholder="MealPlan Name" MaxLength="50"
                CssClass="validate[required] textInputs "></asp:TextBox>
        </div>
        <div style="margin-top: 5px;">
            <input type="checkbox" id="Checkbox1" checked="true" runat="server" name="vehicle"
                value="1" />Share with others
        </div>
    </div>
    <div style="clear: both">
    </div>
    <div style="width: 100%; margin: 10px">
        <div style="width: 97%;">
                <asp:TextBox runat="server" ID="txtDescription" placeholder="Description" CssClass="textInputs "></asp:TextBox>
            </div>
    </div>   
</asp:Panel>
<asp:Panel ID="panel2" Visible="true" runat="server">
    <div style="width: 60%; float: left; margin: 10px auto;">
        <div style="text-align: center; font-size: 12pt; font-weight: bold;">
            <asp:Label runat="server" ID="lblMealPlanName"></asp:Label>
        </div>
        <div style="margin-top: 5px;">
            <input type="checkbox" id="chIsPublish" disabled="true" checked="true" runat="server" name="vehicle"
                value="1" />Share with others
        </div>
    </div>
    <div style="clear: both">
    </div>
    <div style="width: 100%; margin: 5px">
        <div style="width: 97%; height: 20px;" class="box01">
            <asp:Label runat="server" ID="lblDescription" CssClass="padding-text"></asp:Label>
        </div>
    </div>
</asp:Panel>
<div id="primary-main" style="height:150px">
    <div id="primary-nav">
        <ul id="gallery">
        </ul>
        <input id="inputRecipeId" type="hidden" />
    </div>
    </div>
<div>
<div style="clear:both"></div>
    <div style="width: 100%; text-align: center;">
        <asp:Button ID="btnSave" Text="Save" runat="server" Visible="false" CssClass="save_button"
            OnClick="btnSave_Click" OnClientClick="return jQuery('.form').validationEngine('validate')"
            CausesValidation="false" />
        <asp:Button ID="btnEdit" Text="Edit" runat="server" Visible="false" CssClass="save_button"
            OnClick="btn_Click"></asp:Button>
        <asp:Button ID="btnDelete" Visible="false" Text="Delete" runat="server" CssClass="save_button"
            OnClick="btnDelete_Click"></asp:Button>
    </div>
    </div>
<script type="text/javascript">

    function initRating() {
        var userid = '<%=Session["Userid"]%>';
        if (document.getElementById("<%=ratingStar.ClientID%>").value != "") {
            //alert(userid);
            $(".basic").attr('data-average', document.getElementById("<%=ratingStar.ClientID%>").value);
        } else {
            $(".basic").attr('data-average', '0');
        }
        if (userid != "") {
            var recipeID = getUrlVars()["MealPlanId"];
            //alert(recipeID);
            $(".basic").jRating({
                step: true,
                length: 5,
                decimalLength: 1,
                smallStarsPath: 'jquery/icons/small.png',
                onSuccess: function (element, rate) {
                    document.getElementById("<%=ratingStar.ClientID%>").value = rate;
                    if (recipeID != null)
                        submitRating(rate);
                },
                onError: function () {
                    alert('Error : please retry');
                }
            });

        } else {
            $(".basic").jRating({
                isDisabled: true
            });
        }
        //return false;
    }
    function submitRating(rate) {
        alert(rate);
        var mealPlanID = getUrlVars()["MealPlanId"];
        $.ajax({
            type: "POST",
            url: "PIMServices.asmx/Rating",
            data: "{'objectTypeID':'0','objectID':'" + parseInt(mealPlanID, 10) + "','rating':'" + parseInt(rate, 10) + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
            },
            error: function (msg) { alert(msg.d); }
        });
    }

    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
    </script>
    <asp:HiddenField id="ratingStar" runat="server"/>
    <asp:HiddenField ID="hdRecipeId" runat="server"></asp:HiddenField>
    <asp:HiddenField ID="hdImage" runat="server" />
</asp:Content>

